<link rel="stylesheet" href="css/case_list.css">


    <!-- 分类 -->
    <section>
        <div class="container classify">
            <div class="row">
                <ul>
                    <li class="active"><a href="">全案作品</a href=""></li>
                    <li><a href="">设计作品</a></li>
                    <li><a href="">面膜设计</a></li>
                </ul>
            </div>
        </div>
    </section>

    <!-- 路径导航 -->
    <section>
        <div class="container">
            <div class="row">
                <ol class="path">
                    <li><a href="#">所在位置</a></li>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#">案例</a></li>
                </ol>
            </div>
        </div>
    </section>

    <!-- 产品展示 -->
    <section>
        <div class="container show">
            <div class="row">
                <div class="col-xs-12 title">
                    <div class="tit-top">
                        <h3>案例展示</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="show-list">
                    <div class="col-xs-12 col-sm-6 active">
                        <a href=""><img src="./images/show-list/case_01.gif" class="center-block img-responsive" alt=""></a>
                        <h6>天姿曼</h6>
                        <p>熬夜肌肤修复专家。天姿曼为广州美莲葆公司旗下品牌，十年来专注研发面膜，专业生产面膜和专精覃思探索消费者的需求，不断创新...</p>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <a href=""><img src="./images/show-list/case_02.gif" class="center-block img-responsive" alt=""></a>
                        <h6>梵漾</h6>
                        <p>自然主义养护引领者。受佛教梵文《华严经》启示从自然万物中的花、叶、木顿悟真谛，遵循自然万物肤细胞更新循环周期...</p>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <a href=""><img src="./images/case_detail/case_list_06.png" class="center-block img-responsive" alt=""></a>
                        <h6>Aidian爱典</h6>
                        <p>以以女人群作为消费群体定位,产品主要销往各大时尚精品店。产品风格主要以绚丽、多彩的风格吸引眼球..</p>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <a href=""><img src="./images/case_detail/case_list_07.png" class="center-block img-responsive" alt=""></a>
                        <h6>原颜</h6>
                        <p>以少女人群作为消费群体定位,产品主要销往各大时尚精品店产品风格主要以绚丽、多彩的风格吸引眼球...</p>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <a href=""><img src="./images/case_detail/case_list_08.png" class="center-block img-responsive" alt=""></a>
                        <h6>天姿曼</h6>
                        <p>熬夜肌肤修复专家。天姿曼为广州美莲葆公司旗下品牌,十年来专注研发面膜,专业生产面膜和专精覃思探索消费者的需求,不断创新..</p>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <a href=""><img src="./images/case_detail/case_list_09.png" class="center-block img-responsive" alt=""></a>
                        <h6>安马士</h6>
                        <p>以少女人群作为消费群体定位,产品主要销往各大时尚精品店产品风格主要以绚丽、多彩的风格吸引眼球..</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 分页 -->
    <section>
        <div class="container page">
            <div class="row">
                <ul class="center-block">
                    <li class="before"><a href="">上一页</a></li class="next">
                    <li><a href="">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li class="ellipsis"><a href="">...</a></li>
                    <li><a href="">10</a></li>
                    <li class="next"><a href="">下一页</a></li>
                </ul>
            </div>
        </div>
    </section>

    
    <script>
        $(function () {
            $('.my-nav ul li').mouseenter(function () {
                $(this).addClass('active').siblings().removeClass('active');
            })
            $('.classify ul li').mouseenter(function () {
                $(this).addClass('active').siblings().removeClass('active');
            })
            $('.show .show-list div').mouseenter(function () {
                $(this).addClass('active').siblings().removeClass('active');
            })
        })
    </script>